﻿@page "/Breadcrumb"

@using FluentUI.Demo.Shared.Pages.Breadcrumb.Examples

<PageTitle>@App.PageTitle("Breadcrumb")</PageTitle>

<h1>Breadcrumb</h1>

<p>
    As defined by the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/" target="_blank" rel="noopener noreferrer">W3C</a>:
</p>
<blockquote>
    <p>
        A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.
    </p>
</blockquote>
<p>
    <code>&lt;FluentBreadcrumb&gt;</code> wraps the <code>&lt;fluent-breadcrumb&gt;</code> element, a web component implementation of a breadcrumb functionality leveraging the Fluent UI design system.
    It uses the <code>&lt;FluentBreadcrumbItem&gt;</code> component for defining the individual breadcrumb items. The <code>&lt;FluentBreadcrumb&gt;</code> component itself does not have any public parameters
</p>

<h2>Breadcrumb item examples</h2>

<DemoSection Title="Default" Component="@typeof(BreadcrumbItemDefault)"></DemoSection>
<DemoSection Title="With custom separator" Component="@typeof(BreadcrumbItemWithSeparator)"></DemoSection>
<DemoSection Title="With start icon" Component="@typeof(BreadcrumbItemWithStart)"></DemoSection>
<DemoSection Title="With end icon" Component="@typeof(BreadcrumbItemWithEnd)"></DemoSection>
<DemoSection Title="With start, end and custom separator icons" Component="@typeof(BreadcrumbItemWithAll)"></DemoSection>

<h2>Breadcrumb examples</h2>

<DemoSection Title="Default" Component="@typeof(BreadcrumbDefault)"></DemoSection>
<DemoSection Title="With custom separator" Component="@typeof(BreadcrumbWithSeparator)"></DemoSection>
<DemoSection Title="With start icon" Component="@typeof(BreadcrumbWithStart)"></DemoSection>
<DemoSection Title="With end icon" Component="@typeof(BreadcrumbWithEnd)"></DemoSection>
<DemoSection Title="With start, end and custom separator icons" Component="@typeof(BreadcrumbWithAll)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentBreadcrumbItem)" />
